<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>虚拟 DOM</title>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script>
      // 虚拟 DOM 又称为虚拟 DOM 对象 也称之为 react 元素
      let vnode = React.createElement('h1', {title: '测试'}, '当时明月在，曾照彩云归');
      console.log(vnode);

      //原因: 为了高效运行
      // let root = document.querySelector('#root')
      // console.log(root);

      //尝试将虚拟 DOM 转为真实 DOM 插入文档
      // 创建真实 DOM 对象
      let h1 = document.createElement(vnode.type);
      //设置标签属性 遍历 props 属性
      for(let i in vnode.props){
        //判断是否为 children
        if(i !== 'children'){
          //设置属性
          h1.setAttribute(i, vnode.props[i]);
        }else{
          //设置标签的文本
          h1.innerHTML = vnode.props[i];
        }
      }

      //将 h1 插入到 root 容器中
      document.querySelector('#root').append(h1);
    </script>
  </body>
</html>
